<html>

 <script>
	$(function () 
		{
          $('#dtp').datepicker({ dateFormat: 'yy-mm-dd' });          
          //$('.sel').select2();	  
		});
 </script> 
<style>
	table {
	  border-collapse: collapse;
	  border-spacing: none;
	  align:center;
	  }
	 
	  tr th{
		border-top:0;
		border-left:0;
		border-right:0;
		border-bottom: 2px solid;	
		text-align:left;
	  }
	  	 

	thead th {
	  background-color: #F7BE81;
	  font-size: 12px;
	  font-family: sans-serif;
	 border:none; 
	  }

	tbody td {
	  font-size: 12px;  	 
	}

	tr th:first-child {
		  border-top-left-radius: 6px;
		  border-bottom-left-radius: 6px;	  
	}

	tr td:last-child,
	tr th:last-child {
	  border-top-right-radius: 6px;
	  border-bottom-right-radius: 6px;
	}

	label{
		font-weight:bold;
	}
</style>


 <div ng-app="myApp"> 
	<h3>STB Details Master </h3>
		<form  method="post" action=""> 		
			<table>
				<tr>
					<td><label>* STB Number</label></td> <td>:</td>
					<td><input type="text" ng-model="stbd.num" class="input-medium" my-maxlength="8" auto-complete ui-items="stbarr"/></td> 
					
					<td><label>* Card Number</label></td> <td>:</td>
					<td><input type="text" ng-model="stbd.card" class="input-medium" my-maxlength="16" auto-complete ui-items="cardarr"/></td>
					
					<!--<td><label>Active (1/0)</label></td> <td>:</td>
					<td><input type="text" ng-model="stbd.active" class="input-medium"></td>					-->
				</tr>		
				<tr>
					<td><label>* STB Type</label></td> <td>:</td>
					<td> 						
						 <input type="text" ng-model="stbd.typename" capitalize auto-complete ui-items="typearr" class="input-medium"/>		
					</td>
					
					<td><label>Notes</label></td> <td>:</td>
					<td><input type="text" ng-model="stbd.note" class="input-medium"></td>
				</tr>
			</table>
			
			
			<button ng-click="upd()"  class="btn btn-success" ng-disabled="!ed">Update</button> 
			<button ng-click="save()" class="btn btn-info" ng-disabled="ed">Save</button>
			<button href="#/cancel/" ng-click="cancel()" class="btn">Clear</button> 			
			<br/><br/>			
			<table class="table table-striped">
				<thead>
					<tr>
						<th>STB. ID.</th>
						<th>STB Number</th>
						<th>Card Number</th>
						<th>Assigned</th>
						<th>STB Type</th>
						<th>Notes</th>
						<th>Delete</th>
						<th>Edit</th>
					</tr>
				</thead>								
			  
				<tbody>
					<tr ng-repeat="item in stbdet | startingFrom: currentPage*pageSize | limitTo: pageSize ">
						<td>{{item.id}}</td>
						<td>{{item.num}}</td>
						<td>{{item.card}}</td>
						<td>{{item.assigned}}</td>
						<td>{{item.typename}}</td>
						<td>{{item.note}}</td>
						<td><a ng-click="dlt(item.id)"> 
							<img src="glyphicons_bin.png" alt="Delete" width="15" height="15"/></td> 
                         <td><a ng-click="edit(item.id)"> 
							<img src="glyphicons_edit.png" alt="Edit" /></td>		
					</tr>
				</tbody>
				
				<tfoot>
					
					<td colspan="6">
					<div class="pagination pull-left">Current Page  {{currentPage+1}} of {{Math.ceil(stbdet.length/pageSize)}}</div>
						<div class="pagination pull-right">
							<ul>                             
								<button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> &#8678; Prev </button>
									
								<li ng-repeat="n in range(stbdet.length)"
									ng-class="{active: n == currentPage}"
									ng-click="setPage()">
									<a href ng-bind="n + 1">1</a>
								</li> 
					   
								<button class="btn btn-info" ng-disabled="currentPage >= stbdet.length/pageSize - 1" ng-click="currentPage=currentPage+1">  Next &#8680;   </button>							
							</ul>
						</div>
					</td>
			  </tfoot>
			 
			</table>
			
			
		</form>
	</body>
</html>